<template>
    <div>
        <!-- 1.父级宽度或高度  2.滚动的是第一个子元素  3.横滚：scrollX:true-->
        <div class="nav-list">
            <ul ref="nav">
                <li :class="{'active':active===i}" v-for="(item,i) in banner" :key="i">{{item.Linkage}}</li>
            </ul>
        </div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,i) in banner" :key="i">
                    <img :src="item.ImageUrl" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import Swiper from 'swiper/dist/js/swiper.min'
    import Betterscroll from 'better-scroll'
    export default {
        data(){
            return {
                banner:[],
                active:0
            }
        },
        created(){
            this.$http.get('/api/banner').then(res => {
                if(res.data.code === 1){
                    this.banner = res.data.data.BannerList;
                    let that = this;
                    this.$nextTick().then(() => {
                        

                        let w = 0;

                        let lis = this.$refs.nav.children;

                        for(let i =0;i<lis.length;i++){
                            w += lis[i].offsetWidth;
                        }

                        this.$refs.nav.style.width = w +'px';

                        let scroll = new Betterscroll('.nav-list',{
                            scrollX:true
                        })

                        new Swiper('.swiper-container',{
                            slidesPerView: 1.6,
                            spaceBetween: 20,
                            centeredSlides: true,
                            on: {
                                slideChangeTransitionStart: function(){
                                    that.active = this.activeIndex;
                                    scroll.scrollToElement(lis[this.activeIndex]);
                                },
                            }
                        })
                    })
                }
            })
        }
    }
</script>
<style lang="scss">
    @import 'swiper/dist/css/swiper.min.css';
    .swiper-container{
        img{
            width:100%;
            border-radius: 10px;
        }
    }
    .nav-list{
        width:100%;
        height:44px;
        line-height: 44px;
        li{
            padding:0 10px;
            font-size:14px;
            float:left;
            &.active{
                color:red;
            }
        }
    }
</style>

